<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>售后进度跟踪</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/sa.css">
	<style>
		.tracking-container {
			padding: 20px;
			max-width: 1200px;
			margin: 0 auto;
		}
		.search-panel {
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
			padding: 25px;
			margin-bottom: 25px;
		}
		.search-title {
			font-size: 18px;
			font-weight: 600;
			color: #333;
			margin-bottom: 20px;
			display: flex;
			align-items: center;
			gap: 10px;
		}
		.search-form {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 20px;
			align-items: end;
		}
		.form-item {
			display: flex;
			flex-direction: column;
			gap: 8px;
		}
		.form-label {
			font-weight: 500;
			color: #333;
			font-size: 14px;
		}
		.tracking-cards {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
			gap: 20px;
			margin-bottom: 25px;
		}
		.tracking-card {
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
			overflow: hidden;
			transition: transform 0.2s, box-shadow 0.2s;
		}
		.tracking-card:hover {
			transform: translateY(-2px);
			box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
		}
		.card-header {
			padding: 20px;
			border-bottom: 1px solid #f0f2f5;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
		}
		.case-info {
			flex: 1;
		}
		.case-number {
			font-size: 16px;
			font-weight: 600;
			color: #333;
			margin-bottom: 8px;
		}
		.case-type {
			background: #f0f9ff;
			color: #1890ff;
			padding: 4px 8px;
			border-radius: 4px;
			font-size: 12px;
			font-weight: 500;
			display: inline-block;
			margin-bottom: 8px;
		}
		.case-desc {
			font-size: 14px;
			color: #666;
			line-height: 1.4;
		}
		.case-status {
			text-align: center;
		}
		.status-badge {
			padding: 6px 12px;
			border-radius: 6px;
			font-size: 12px;
			font-weight: 500;
			margin-bottom: 8px;
			display: inline-block;
		}
		.status-pending {
			background: #fff7e6;
			color: #fa8c16;
		}
		.status-processing {
			background: #f0f9ff;
			color: #1890ff;
		}
		.status-completed {
			background: #f6ffed;
			color: #52c41a;
		}
		.status-cancelled {
			background: #fff2f0;
			color: #ff4d4f;
		}
		.progress-info {
			font-size: 12px;
			color: #999;
		}
		.card-content {
			padding: 20px;
		}
		.timeline {
			position: relative;
		}
		.timeline-item {
			position: relative;
			padding-left: 35px;
			margin-bottom: 20px;
		}
		.timeline-item:last-child {
			margin-bottom: 0;
		}
		.timeline-dot {
			position: absolute;
			left: 0;
			top: 4px;
			width: 12px;
			height: 12px;
			border-radius: 50%;
			border: 2px solid #e1e6ed;
			background: #fff;
		}
		.timeline-dot.active {
			border-color: #409eff;
			background: #409eff;
		}
		.timeline-dot.completed {
			border-color: #67c23a;
			background: #67c23a;
		}
		.timeline-line {
			position: absolute;
			left: 5px;
			top: 16px;
			bottom: -20px;
			width: 2px;
			background: #e1e6ed;
		}
		.timeline-item:last-child .timeline-line {
			display: none;
		}
		.timeline-content {
			margin-bottom: 8px;
		}
		.timeline-title {
			font-size: 14px;
			font-weight: 500;
			color: #333;
			margin-bottom: 4px;
		}
		.timeline-desc {
			font-size: 13px;
			color: #666;
			line-height: 1.4;
		}
		.timeline-time {
			font-size: 12px;
			color: #999;
		}
		.card-actions {
			padding: 15px 20px;
			border-top: 1px solid #f0f2f5;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.case-meta {
			font-size: 12px;
			color: #999;
		}
		.summary-panel {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			border-radius: 12px;
			padding: 25px;
			margin-bottom: 25px;
		}
		.summary-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
			gap: 20px;
			margin-top: 20px;
		}
		.summary-item {
			text-align: center;
			background: rgba(255, 255, 255, 0.1);
			padding: 15px;
			border-radius: 8px;
		}
		.summary-number {
			font-size: 24px;
			font-weight: bold;
			margin-bottom: 5px;
		}
		.summary-label {
			font-size: 14px;
			opacity: 0.9;
		}
		.filter-tabs {
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
			margin-bottom: 25px;
			overflow: hidden;
		}
		.tab-header {
			display: flex;
			background: #f8f9fa;
			border-bottom: 1px solid #e9ecef;
		}
		.tab-item {
			flex: 1;
			padding: 15px 20px;
			text-align: center;
			cursor: pointer;
			transition: all 0.3s;
			border-bottom: 3px solid transparent;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
		}
		.tab-item.active {
			background: #fff;
			color: #409eff;
			border-bottom-color: #409eff;
		}
		.no-data {
			text-align: center;
			padding: 60px 20px;
			color: #999;
		}
		.loading-state {
			text-align: center;
			padding: 60px 20px;
			color: #999;
		}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<div class="tracking-container">
			<!-- 页面标题 -->
			<div class="page-title">
				<h2>售后进度跟踪</h2>
				<p>实时查看售后申请的处理进度：申请→审核→处理→完成</p>
			</div>

			<!-- 查询面板 -->
			<div class="search-panel">
				<div class="search-title">
					<i class="el-icon-search"></i>
					进度查询
				</div>
				<div class="search-form">
					<div class="form-item">
						<label class="form-label">售后单号</label>
						<el-input v-model="searchForm.caseNumber" placeholder="请输入售后单号" clearable>
							<el-button slot="append" icon="el-icon-search" @click="searchCase"></el-button>
						</el-input>
					</div>
					<div class="form-item">
						<label class="form-label">订单号</label>
						<el-input v-model="searchForm.orderNumber" placeholder="请输入订单号" clearable></el-input>
					</div>
					<div class="form-item">
						<label class="form-label">申请类型</label>
						<el-select v-model="searchForm.caseType" placeholder="选择类型" clearable>
							<el-option label="全部类型" value="all"></el-option>
							<el-option label="退换货" value="return"></el-option>
							<el-option label="破损补发" value="damage"></el-option>
							<el-option label="投诉" value="complaint"></el-option>
							<el-option label="退款" value="refund"></el-option>
						</el-select>
					</div>
					<div class="form-item">
						<label class="form-label">申请日期</label>
						<el-date-picker
							v-model="searchForm.dateRange"
							type="daterange"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期">
						</el-date-picker>
					</div>
				</div>
			</div>

			<!-- 统计概览 -->
			<div class="summary-panel" v-if="hasSearched">
				<h3><i class="el-icon-data-analysis"></i> 售后进度统计</h3>
				<div class="summary-grid">
					<div class="summary-item">
						<div class="summary-number">{{summaryStats.totalCases}}</div>
						<div class="summary-label">总申请数</div>
					</div>
					<div class="summary-item">
						<div class="summary-number">{{summaryStats.processingCases}}</div>
						<div class="summary-label">处理中</div>
					</div>
					<div class="summary-item">
						<div class="summary-number">{{summaryStats.completedCases}}</div>
						<div class="summary-label">已完成</div>
					</div>
					<div class="summary-item">
						<div class="summary-number">{{summaryStats.avgProcessTime}}</div>
						<div class="summary-label">平均处理时间</div>
					</div>
				</div>
			</div>

			<!-- 状态筛选 -->
			<div class="filter-tabs" v-if="hasSearched">
				<div class="tab-header">
					<div 
						v-for="tab in statusTabs" 
						:key="tab.value"
						:class="['tab-item', {active: activeStatus === tab.value}]"
						@click="switchStatus(tab.value)">
						<i :class="tab.icon"></i>
						{{tab.label}} ({{tab.count}})
					</div>
				</div>
			</div>

			<!-- 加载状态 -->
			<div v-if="loading" class="loading-state">
				<i class="el-icon-loading" style="font-size: 32px; margin-bottom: 10px;"></i>
				<p>正在查询售后进度...</p>
			</div>

			<!-- 无数据状态 -->
			<div v-else-if="hasSearched && (!trackingCases || trackingCases.length === 0)" class="no-data">
				<i class="el-icon-document" style="font-size: 48px; color: #ddd; margin-bottom: 15px;"></i>
				<p>未找到相关售后申请记录</p>
				<el-button size="small" @click="resetSearch">重新查询</el-button>
			</div>

			<!-- 进度跟踪卡片 -->
			<div v-else-if="hasSearched" class="tracking-cards">
				<div v-for="caseItem in filteredCases" :key="caseItem.id" class="tracking-card">
					<div class="card-header">
						<div class="case-info">
							<div class="case-number">{{caseItem.caseNumber}}</div>
							<span :class="['case-type', 'type-' + caseItem.type]">{{caseItem.typeName}}</span>
							<div class="case-desc">{{caseItem.description}}</div>
						</div>
						<div class="case-status">
							<span :class="['status-badge', 'status-' + caseItem.status]">{{caseItem.statusText}}</span>
							<div class="progress-info">{{caseItem.progressInfo}}</div>
						</div>
					</div>
					
					<div class="card-content">
						<div class="timeline">
							<div v-for="(step, index) in caseItem.timeline" :key="index" class="timeline-item">
								<div :class="['timeline-dot', step.status]"></div>
								<div class="timeline-line"></div>
								<div class="timeline-content">
									<div class="timeline-title">{{step.title}}</div>
									<div class="timeline-desc">{{step.description}}</div>
								</div>
								<div class="timeline-time">{{step.time}}</div>
							</div>
						</div>
					</div>
					
					<div class="card-actions">
						<div class="case-meta">
							订单号：{{caseItem.orderNumber}} | 申请时间：{{caseItem.applyTime}}
						</div>
						<div>
							<el-button size="small" @click="viewDetail(caseItem)">查看详情</el-button>
							<el-button size="small" type="primary" @click="contactService(caseItem)" v-if="caseItem.status === 'processing'">联系客服</el-button>
						</div>
					</div>
				</div>
			</div>

			<!-- 操作提示 -->
			<div v-if="!hasSearched" style="text-align: center; padding: 60px 20px;">
				<i class="el-icon-search" style="font-size: 48px; color: #ddd; margin-bottom: 15px;"></i>
				<p style="color: #999; margin-bottom: 20px;">请输入售后单号或订单号来查询进度</p>
				<el-button type="primary" @click="searchCase" :disabled="!searchForm.caseNumber && !searchForm.orderNumber">开始查询</el-button>
			</div>
		</div>
	</div>

	<!-- 引入依赖 -->
	<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					loading: false,
					hasSearched: false,
					activeStatus: 'all',
					searchForm: {
						caseNumber: '',
						orderNumber: '',
						caseType: 'all',
						dateRange: []
					},
					statusTabs: [
						{label: '全部', value: 'all', icon: 'el-icon-folder', count: 0},
						{label: '待审核', value: 'pending', icon: 'el-icon-time', count: 0},
						{label: '处理中', value: 'processing', icon: 'el-icon-loading', count: 0},
						{label: '已完成', value: 'completed', icon: 'el-icon-check', count: 0},
						{label: '已取消', value: 'cancelled', icon: 'el-icon-close', count: 0}
					],
					trackingCases: [],
					summaryStats: {
						totalCases: 0,
						processingCases: 0,
						completedCases: 0,
						avgProcessTime: '0天'
					}
				}
			},
			computed: {
				filteredCases() {
					if (this.activeStatus === 'all') {
						return this.trackingCases;
					}
					return this.trackingCases.filter(caseItem => caseItem.status === this.activeStatus);
				}
			},
			methods: {
				searchCase() {
					if (!this.searchForm.caseNumber && !this.searchForm.orderNumber) {
						this.$message.warning('请输入售后单号或订单号');
						return;
					}
					
					this.loading = true;
					this.hasSearched = true;
					
					// 模拟API请求
					setTimeout(() => {
						this.trackingCases = this.generateMockCases();
						this.calculateSummary();
						this.updateStatusCounts();
						this.loading = false;
						
						this.$message.success('查询成功');
					}, 1500);
				},
				
				generateMockCases() {
					return [
						{
							id: 1,
							caseNumber: 'AS2024011501',
							orderNumber: 'YN2024011401',
							type: 'return',
							typeName: '退换货',
							status: 'processing',
							statusText: '处理中',
							progressInfo: '预计1天内完成',
							description: '有机小白菜质量问题，申请退货',
							applyTime: '2024-01-15 10:30:00',
							timeline: [
								{
									title: '提交申请',
									description: '客户提交退货申请，原因：商品质量问题',
									time: '2024-01-15 10:30:00',
									status: 'completed'
								},
								{
									title: '客服审核',
									description: '客服正在审核申请材料和相关凭证',
									time: '2024-01-15 14:20:00',
									status: 'completed'
								},
								{
									title: '审核通过',
									description: '申请已通过审核，安排物流上门取件',
									time: '2024-01-16 09:15:00',
									status: 'active'
								},
								{
									title: '物流取件',
									description: '等待物流上门取件',
									time: '预计2024-01-17',
									status: ''
								},
								{
									title: '处理完成',
									description: '退款处理完成',
									time: '预计2024-01-18',
									status: ''
								}
							]
						},
						{
							id: 2,
							caseNumber: 'AS2024011401',
							orderNumber: 'YN2024011301',
							type: 'damage',
							typeName: '破损补发',
							status: 'completed',
							statusText: '已完成',
							progressInfo: '已完成处理',
							description: '三文鱼包装破损，申请补发',
							applyTime: '2024-01-14 16:45:00',
							timeline: [
								{
									title: '提交申请',
									description: '客户申请破损补发，上传破损照片',
									time: '2024-01-14 16:45:00',
									status: 'completed'
								},
								{
									title: '客服审核',
									description: '客服审核通过，确认为运输破损',
									time: '2024-01-14 18:20:00',
									status: 'completed'
								},
								{
									title: '安排补发',
									description: '已安排仓库重新发货',
									time: '2024-01-15 08:30:00',
									status: 'completed'
								},
								{
									title: '补发完成',
									description: '新商品已送达客户，问题解决',
									time: '2024-01-16 14:20:00',
									status: 'completed'
								}
							]
						},
						{
							id: 3,
							caseNumber: 'AS2024011301',
							orderNumber: 'YN2024011201',
							type: 'complaint',
							typeName: '投诉',
							status: 'pending',
							statusText: '待审核',
							progressInfo: '等待客服审核',
							description: '配送员服务态度问题投诉',
							applyTime: '2024-01-13 20:15:00',
							timeline: [
								{
									title: '提交投诉',
									description: '客户提交服务态度投诉',
									time: '2024-01-13 20:15:00',
									status: 'completed'
								},
								{
									title: '客服审核',
									description: '客服正在核实投诉内容',
									time: '等待处理',
									status: 'active'
								},
								{
									title: '调查处理',
									description: '联系相关人员调查处理',
									time: '待安排',
									status: ''
								},
								{
									title: '结果反馈',
									description: '处理结果反馈给客户',
									time: '待完成',
									status: ''
								}
							]
						}
					];
				},
				
				calculateSummary() {
					const cases = this.trackingCases;
					this.summaryStats = {
						totalCases: cases.length,
						processingCases: cases.filter(c => c.status === 'processing').length,
						completedCases: cases.filter(c => c.status === 'completed').length,
						avgProcessTime: '2天'
					};
				},
				
				updateStatusCounts() {
					this.statusTabs.forEach(tab => {
						if (tab.value === 'all') {
							tab.count = this.trackingCases.length;
						} else {
							tab.count = this.trackingCases.filter(c => c.status === tab.value).length;
						}
					});
				},
				
				switchStatus(status) {
					this.activeStatus = status;
				},
				
				viewDetail(caseItem) {
					this.$message.info(`查看详情：${caseItem.caseNumber}`);
					// 实际应用中这里会打开详情弹窗或跳转详情页面
				},
				
				contactService(caseItem) {
					this.$message.success(`为案例 ${caseItem.caseNumber} 联系客服`);
					// 实际应用中这里会打开客服对话或跳转沟通页面
				},
				
				resetSearch() {
					this.searchForm = {
						caseNumber: '',
						orderNumber: '',
						caseType: 'all',
						dateRange: []
					};
					this.hasSearched = false;
					this.trackingCases = [];
					this.activeStatus = 'all';
				}
			}
		});
	</script>
</body>
</html>